<template>
  <div class="control list_container flex both-100">
      <div class="content_container">
          <!-- 搜索 -->
          <el-form ref="searchForm" :model="searchMap">
              <div class="search_wrapper flex-space-between el-form--inline" style="margin-top: 20px;">
                  <div class="edit">
                      <el-form-item class="flex">
                          <el-button @click="handleAdd()" class="btn_primary el-icon-plus">新增</el-button>
                      </el-form-item>
                  </div>

              </div>
          </el-form>
          <div class="table_container">
              <!-- 表格 -->
              <el-table :data="dataList" v-loading="loading" stripe class="per_table" style="width: 100%"
                  :height="winTableH">
                  <el-table-column type="index" width="50" label="序号" align="center" />
                  <el-table-column prop="emergencyTeamName" label="姓名"></el-table-column>
                  <!-- <el-table-column prop="riskControlMeasuresLevel" label="管控层级" align="center">
                      <template slot-scope="scope">
                                  <dict-tag :options="dict.type.control_hierarchy" :value="scope.row.riskControlMeasuresLevel" />
                              </template>
                  </el-table-column> -->
                  <el-table-column prop="companyPost" label="公司职务" align="center"></el-table-column>
                  <el-table-column prop="emergencyTeamPost" label="应急救援中所属职务" align="center"></el-table-column>
                  <el-table-column prop="phonenumber" label="手机" align="center"></el-table-column>
                  <el-table-column label="操作" width="280">
                      <template slot-scope="scope">
                          <div>
                              <span type="text" class="tag_primary" size="small"
                                  @click="handleSelect(scope.row)">查看</span>
                              <span type="text" class="marginl-10 tag_primary" size="small"
                                  @click="handleEdit(scope.row)">编辑</span>
                              <span type="text" class="marginl-10 tag_warning" size="small"
                                  @click="handleDelete(scope.row)">删除</span>
                          </div>
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <!-- 分页 -->
          <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
              @change="getList"></Pagination>
      </div>

      <!-- 弹窗 详情 -->
      <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body
          :before-close="() => { dialogVisible = false }" :close-on-click-modal="false">
          <div class="content">
              <el-form ref="form" :model="formModel" size="small" :rules="formRules" label-width="80px"
                  :disabled="title === '组员详情'">
                  <el-row :gutter="20">
                      <el-col :span="24">
                          <el-form-item label="姓名" label-width="120px" prop="emergencyTeamName">
                              <el-input v-model="formModel.emergencyTeamName" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <!-- <el-col :span="12">
                          <el-form-item label="管控层级" label-width="120px" prop="riskControlMeasuresLevel">
                              <el-select v-model="formModel.riskControlMeasuresLevel" placeholder="请选择管理层级"
                                  style="width: 100%;">
                                  <el-option v-for="(item, index) in dict.type.control_hierarchy" :label="item.label"
                                      :value="item.value"></el-option>
                              </el-select>
                          </el-form-item>
                      </el-col> -->
                      <el-col :span="24">
                          <el-form-item label="公司职务" label-width="120px"  prop="companyPost">
                              <el-input v-model="formModel.companyPost" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="24">
                          <el-form-item label="应急救援中担任职务" label-width="120px" prop="emergencyTeamPost">
                              <el-input v-model="formModel.emergencyTeamPost" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="24">
                          <el-form-item label="手机" label-width="120px" prop="phonenumber">
                              <el-input v-model="formModel.phonenumber" placeholder="请输入"></el-input>
                          </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
          </div>
          <div slot="footer" class="dialog-footer" v-show="title === '组员详情'">
              <el-button @click="() => { dialogVisible = false }" class="btn_cancel">关 闭</el-button>
          </div>
          <div slot="footer" class="dialog-footer" v-show="title !== '组员详情'">
              <el-button @click="() => { dialogVisible = false }" class="btn_cancel">取 消</el-button>
              <el-button type="primary" @click="submitFrom()" class="btn_primary">确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="dialogVisibleInfo" width="800" append-to-body>
            <custom-title title="详细信息" />
            <BaseDescriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="formModel">
            </BaseDescriptions>
        </el-dialog>
  </div>
</template>
<script>
import { emergencyTeamHandle, emergencyTeamList } from '../api/index'
import BaseDescriptions from '@/components/PageContent/BaseDescriptions.vue';
export default {
  name:'emergencyRanks',
  dicts: ['control_hierarchy'],
  props: {
        projectPointInfo: {
            type: Object,
            required: true
        }
    },
    components: {
        BaseDescriptions,
    },
  data() {
      return {
          pageTitle: '组员',
          loading: false,
          total: 10,
          title: '组员详情',
          dialogVisible: false,
          dialogVisibleInfo: false,
          searchMap: {
              pageNum: 1,
              pageSize: 10,
          },
          descConfig: {
                size: 'medium',
                column: '2',
            },
            descConfigItem: [
                {
                    fieIdName: 'emergencyTeamName',
                    label: '姓名',
                    span: 2,
                },
                {
                    fieIdName: 'emergencyTeamPost',
                    label: '公司职务',
                    span: 2,
                },
                {
                    fieIdName: 'emergencyTeamPost',
                    label: '应急救援中担任职务',
                    span: 2,
                },
                {
                    fieIdName: 'phonenumber',
                    label: '手机',
                    span: 2,
                },
            ],
          dataList: [
          ],
          // 提交表单数据
          formModel: {},
          reqType: 'post',
          formRules: {
            emergencyTeamName: {
                  required: true,
                  message: "姓名不能为空",
                  trigger: "change",
              },
              companyPost: {
                  required: true,
                  message: "公司职务不能为空",
                  trigger: "change",
              },
              emergencyTeamPost: {
                  required: true,
                  message: "应急救援中担任职务不能为空",
                  trigger: "change",
              },
              phonenumber: {
                  required: true,
                  message: "手机不能为空",
                  trigger: "change",
              },
          },
      }
  },
  methods: {
      submitFrom() {
        this.formModel.projectPointId = this.projectPointInfo.projectPointId
          this.$refs.form.validate((valid) => {
              if (valid) {
                emergencyTeamHandle(this.formModel, this.reqType).then(res => {
                      if (200 === res.code) {
                          this.$message({
                              message: '操作成功',
                              type: 'success',
                          });
                          this.dialogVisible = false
                          this.formModel = {}
                          this.getList()
                      }
                  });
              } else {
                  return false;
              }
          });
      },
      //删除
      handleDelete(row) {
          this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
            emergencyTeamHandle([row.emergencyTeamId], 'delete').then(res => {
                  if (200 === res.code) {
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                      this.getList()
                  }
              });
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },
      // 查询
      handleSearch() {
          this.getList()
      },
      // 重置
      handleReset() {
          this.searchMap = {
              pageNum: 1,
              pageSize: 10,
          }
          this.getList()
      },
      //新增打开
      handleAdd() {
          this.title = "新增组员"
          this.reqType = 'post'
          if (this.$refs.form) {
              this.$refs.form.resetFields()
          }
          this.formModel = {}
          this.dialogVisible = true;
      },
      //编辑
      handleEdit(row) {
          this.title = "编辑组员"
          this.formModel = row
          this.reqType = 'put'
          this.dialogVisible = true;
      },
      //查看
      handleSelect(row) {
          this.title = "组员详情"
          this.formModel = row
          this.reqType = 'select'
          this.dialogVisibleInfo = true;
      },
      // 页面数据
      async getList() {
          const { code, rows, total } = await emergencyTeamList(this.searchMap)
          if (code === 200) {
              this.loading = false
              this.dataList = rows
              this.total = total
          }
      },
  },
  mounted() {
    this.searchMap.projectPointId = this.projectPointInfo.projectPointId
    this.getList()
  },
}
</script>
<style lang="less">


.control {
  .el-table__cell {
      .cell {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
  }
}</style>
<style lang="less" scoped>
.list_container {
  flex-direction: column;
  background: url("@/assets/images/home/content.png") no-repeat;
  background-size: cover;

  .content_container {
      padding: 15px 20px;
      overflow-y: scroll;
  }

  .table_container {
      margin-bottom: 25px;
  }

  .pagination_container {
      display: flex;
      justify-content: space-between;
      height: 32px;
  }
}
</style>